<script setup>
import HomePinal from "./HomePinal.vue";
import GoodsItem from "./GoodsItem.vue";
import { getGoodsListApi } from "@/api/home";
import { ref, onMounted } from "vue";

const goodsList = ref([]);
const getGoodsList = async () => {
  const res = await getGoodsListApi();
  goodsList.value = res.result;
  console.log(goodsList.value);
};

onMounted(() => getGoodsList());
defineProps({
  title: {
    type: String,
  },
});
</script>

<template>
  <div class="home-product">
    <HomePinal v-for="item in goodsList" :key="item.id" :title="item.name" small="">
      <template #mid>
        <div class="product">
          <div class="left">
            <img :src="item.picture" alt="" />
          </div>
          <ul class="goods">
            <GoodsItem 
  v-for="goods in item.goods.slice(0, 8)"
  :key="goods.id"
  :goods="goods"
  class="hh"
>
              <template #flex>
                <div class="flex">
                  <p class="zxs">找相似</p>
                  <p>——————————</p>
                  <p class="fx">发现更多宝贝 ></p>
                </div>
              </template>
            </GoodsItem>
          </ul>
        </div>
      </template>
    </HomePinal>
  </div>
</template>
<style lang="scss" scoped>
.product {
  position: relative;
  height: 610px;
  width: 100%;
  display: flex;

  .left {
    height: 610px;
    width: 240px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #f5f5f5;
    img {
      height: 610px;
      width: 240px;
    }
  }

  .goods {
    position: absolute;
    top: 0;
    left: 240px;
    width: 1000px;
    height: 610px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .hh {
      height: 300px;
      width: 240px;
      position: relative;
      overflow: hidden;

      &:hover {
        border: 1px solid rgb(157, 255, 87);
        .flex {
          transform: translateY(-100%);
        }
      }
      .flex {
        position: absolute;
        background-color: $sucColor;
        display: flex;
        left: 0;
        top: 300px;
        width: 100%;
        height: 100px;
        display: block;
        object-fit: cover;
        transition: transform 0.5s ease;

        p {
          text-align: center;
          line-height: 20px;
          height: 20px;
          color: #fff;
        }
        .zxs {
          font-size: 18px;
          margin-top: 10px;
        }
        .fx {
          font-size: 14px;
          margin: 2px 0;
        }
      }
    }
  }
}
</style>
